<template>
	<view class="address">
		<u-input class="input" v-model="address" :disabled="disabled || isSelect" :border="true" type="textarea" :height="120"
			maxlength="300" :placeholder="placeholder" />
		<view v-if="!disabled" class="btn">
		<u-button size="mini" type="primary" v-if="!disabled" @click="getAddress">{{address != '' ? '已获取' : '获取地址'}}</u-button>
		</view>
	</view>
</template>
<script>
	export default {
		name: "HAdressSelect",
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			unikey: {
				type: [Number, String],
				default: '',
			},
			dot: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: ''
			},
			value: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				address: "",
				isSelect: true, //如果用户未通过地图定位选择到点位信息，用户无法手输
			};
		},
		watch: {
			value(newData){
				this.address = newData;
			},
			dot(newData){
				this.isSelect = newData == '' || newData == null ? true : false;
			}
		},
		methods: {
			getAddress() {
				uni.navigateTo({
					url: `/components/map/map?address=1&unikey=${this.unikey}&disabled=${this.disabled ? 1 : 0}`
				})
			},
			saveAddress(data) {
				if (this.unikey == data.unikey) {
					this.address = data.address;
					this.isSelect = false;
					this.$emit('change', data.address);
					this.$emit('changDot', JSON.stringify(data.dot));
				}
			},
		},
		mounted() {
			//监听 uni 监听函数
			uni.$on("saveAddress", this.saveAddress);
			this.address = this.value;
			this.isSelect = this.dot == '' || this.dot == null ? true : false;
		},
		beforeDestroy() {
			//移除监听
			uni.$off('saveAddress', this.saveAddress)
		}
	}
</script>
<style lang="scss" scoped>
	.address {
		display: flex;
		flex-direction: column;
		width: 100%;
		.input {
			width: 100%;
		}
	}
</style>
